import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { VantResolver } from 'unplugin-vue-components/resolvers'
import { viteMockServe } from 'vite-plugin-mock'
import eslintPlugin from 'vite-plugin-eslint'

export default ({ mode }) => {
  // mode就是执行npm run 命令时--mode后面的参数，vite --mode development-sz
  // process.cwd()是当前Node.js进程执行时的文件夹地址
  const env = loadEnv(mode, process.cwd()) // 获取.env文件里定义的环境变量

  return defineConfig({
    base: env.VITE_BASE_URL || '/',
    server: {
      port: 3002,
      host: '0.0.0.0',
      // open: true,
      proxy: {
        '/dev-api/': {
          target: 'http://127.0.0.1:8080/',
          rewrite: (path) => path.replace(/^\/dev-api/, ''),
          changeOrigin: true,
        },
      },
    },
    resolve: {
      alias: {
        // 配置资源路径
        '@/': `${path.resolve(__dirname, 'src')}/`,
      },
    },
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `@use "@/assets/styles/var.scss" as *;`, // 自定义的主题色
          charset: false, // 禁止项目scss添加@charset:UTF-8
        },
      },
    },
    plugins: [
      vue(),
      eslintPlugin({ cache: false }),
      AutoImport({
        // 全局引入插件
        imports: ['vue', 'vue-router'],
        eslintrc: {
          enabled: false, // 默认false, true启用。生成一次就可以，避免每次工程启动都生成
          filepath: './.eslintrc-auto-import.json', // 生成json文件
          globalsPropValue: true,
        },
      }),
      Components({
        resolvers: [VantResolver()],
      }),
      //mock
      viteMockServe({
        mockPath: './mock/', // mock文件路径
        localEnabled: env.VITE_USE_MOCK === 'true', // 开发环境
        prodEnabled: env.VITE_USE_MOCK === 'true', // 测试、生产环境
        supportTs: false, // 打开后，可以读取 ts ⽂件模块。请注意，打开后将⽆法监视.js ⽂件。
        watchFiles: true, // 监视⽂件更改，并重新加载 mock 数据
        // 这样可以控制关闭mock的时候不让mock打包到最终代码内
        injectCode: `
          import { setupProdMockServer } from './mockProdServer';
          setupProdMockServer();
        `,
      }),
    ],
    build: {
      minify: 'terser',
      // css的兼容
      cssTarget: 'chrome61',
      // 设置最终构建的浏览器兼容目标
      target: 'es2015',
      // 构建后是否生成 source map 文件
      sourcemap: false,
      //  chunk 大小警告的限制（以 kbs 为单位）
      chunkSizeWarningLimit: 2000,
      // 启用/禁用 gzip 压缩大小报告
      reportCompressedSize: false,
      // 生产环境清除console和debugger
      terserOptions: {
        compress: {
          drop_console: true,
          drop_debugger: true,
        },
      },
      rollupOptions: {
        output: {
          // 最小化拆分包
          manualChunks: (id) => {
            if (id.includes('node_modules')) {
              return id.toString().split('node_modules/')[1].split('/')[0].toString()
            }
          },
          // 用于从入口点创建的块的打包输出格式[name]表示文件名,[hash]表示该文件内容hash值
          entryFileNames: 'assets/js/[name].[hash].js',
          // 用于命名代码拆分时创建的共享块的输出命名
          chunkFileNames: 'assets/js/[name].[hash].js',
          // 用于输出静态资源的命名，[ext]表示文件扩展名
          assetFileNames: 'assets/[ext]/[name].[hash].[ext]',
          // 拆分js到模块文件夹
          // chunkFileNames: (chunkInfo) => {
          //     const facadeModuleId = chunkInfo.facadeModuleId ? chunkInfo.facadeModuleId.split('/') : [];
          //     const fileName = facadeModuleId[facadeModuleId.length - 2] || '[name]';
          //     return `js/${fileName}/[name].[hash].js`;
          // },
        },
      },
    },
  })
}
